<template>
    <tabbar>
        <tabbar-item v-for="(tab,index) in tabbar" :num="index" :key='index' :selected="active==index" :link="tab.path">
            <img slot="icon" :src="imgBasePath+tab.icon">
            <span slot="label">{{tab.name}}</span>
        </tabbar-item>
    </tabbar>
</template>


<script>
	import { Tabbar, TabbarItem } from 'vux';
	export default {
		data() {
			return {
				active: 0,
				imgBasePath:"./static/img/",
				tabbar: [{
						name: "我的成绩",
						path: "/stu_score",
						pathName: "stu_score",
						icon: "icon-MyGrade.png",
						iconCheck:  "icon-MyGrade-ing.png",
					},
					{
						name: "扣分申诉",
						path: "/stu_apply",
						pathName: "stu_apply",
						icon: "icon-check.png",
						iconCheck:  "icon-check-ing.png",
					},
					{
						name: "个人中心",
						path: "/stu_center",
						pathName: "stu_center",
						icon: "me.png",
						iconCheck:  "me-ing.png",
					}
				]
			}
		},
		
		watch:{
			'$route': 'changeActive'
		},
		
		created(){
            const toName = this.$route.name
			this.setActive(toName)
		},
		
		methods: {
			changeActive({ name }){
				this.setActive(name)
			},
			setActive(name){
				this.tabbar.forEach((tab, i) => {
					if(tab.pathName == name){
						this.active = i;
						tab.icon=tab.icon.replace(".png","-ing.png");
						return false;
					}else{
						tab.icon=tab.icon.replace("-ing.png",".png");
					}
				})
			}
		},
		
		components:{
            Tabbar,
            TabbarItem,
        }
    }
</script>
<style scoped>
.weui-tabbar{
	background: white;
}
/* .weui-tabbar__icon .weui-icon{
    font-size: 27px; 
}
.weui-tabbar__icon .weui-icon::before{
    margin-left: 0 !important; 
    margin-right: 0 !important; 
} */
</style>

